<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@include file="/WEB-INF/webpage/common/taglibs.jspf"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>省钱购商城</title>
    <meta name="author" content="order by kyjszj.com />
    <html:css  name="assets,kyjszj"/>
    <style>
    			.date-tiem-span,.date-s-span{display: inline-block;font-size:18px; width:36px; height:30px;line-height:30px; text-align: center; color:#fff; border-radius:5px;}
    			.date-tiem-span{ background:#333;}
    			.date-s-span{ background:#f00;}
    			.date-select-a{margin-right:5px;}
    			.buy-step {
                    position: relative;
                    width: 420px;
                    margin: 80px auto 0;
                    font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
                }
                .buy-step-text {
                    float: left;
                    width: 30px;
                    height: 38px;
                    line-height: 19px;
                    margin-top: 10px;
                    margin-right: 30px;
                    color: #727272;
                    font-size: 14px;
                }
                .buy-step-first {
                    float: left;
                    width: 145px;
                    height: 58px;
                    background-color: #F2EBCF;
                    overflow: hidden;
                }
                .coupon-btn {
                    float: right;
                    width: 45px;
                    height: 38px;
                    line-height: 19px;
                    padding: 10px 6px 10px 14px;
                    text-align: center;
                    font-size: 14px;
                    letter-spacing: 0.1em;
                    color: #FFF;
                    background: url(${staticPath}/vendors/assets/images/coupon-btn.png) repeat-y 0 0;
                    transition: font-size .3s;
                }
                .ss{
                    float: left;
                    width: 79px;
                    height: 46px;
                    padding: 6px 0;
                    color: #ed145b;
                    text-align: center;}
                .sss{
                    display: block;
                    font-size: 12px;
                    line-height: 20px;
                    font-style: normal;}
                 .sb{
                     display: block;
                     font-size: 20px;
                     line-height: 26px;
                     font-weight: normal;}
    </style
</head>
<body class="product-page">
<!-- HEADER -->
<div id="header" class="header">
   <jsp:include page="../common/topHeader.jsp"/>
   <jsp:include page="../common/mainHeader.jsp"/>
   <jsp:include page="../common/menu.jsp"/>

</div>
<!-- end header -->

<div class="columns-container">
    <div class="container" id="columns">
        <!-- breadcrumb -->
        <div class="breadcrumb clearfix">
            <a class="home" href="#" title="Return to Home">首页</a>
            <span class="navigation-pipe">&nbsp;</span>
            <a href="#" title="Return to Home">时尚</a>
            <span class="navigation-pipe">&nbsp;</span>
            <a href="#" title="Return to Home">女士</a>
            <span class="navigation-pipe">&nbsp;</span>
            <a href="#" title="Return to Home">连衣裙</a>
            <span class="navigation-pipe">&nbsp;</span>
            <span class="navigation_page">lv</span>
        </div>
        <!-- ./breadcrumb -->
        <!-- row -->
        <div class="row">

            <!-- Center colunm-->
            <div class="center_column col-xs-12 col-sm-12" id="center_column">
                <!-- Product -->
                    <div id="product">
                        <div class="primary-box row">
                            <div class="pb-left-column col-xs-12 col-sm-5">
                                <!-- product-imge-->
                                <div class="product-image">
                                    <div class="product-full">
                                        <img id="product-zoom" src='${product.pictUrl}' data-zoom-image="${product.pictUrl}"/>
                                    </div>

                                    <div class="product-img-thumb" id="gallery_01">
                                        <ul class="owl-carousel" data-items="3" data-nav="true" data-dots="false" data-margin="21" data-loop="false">
                                            <c:forEach items="${detail.small_images}" var ="si">
                                            <li>
                                                <a href="#" data-image="${si}" data-zoom-image="${si}">
                                                  <img id="product-zoom"  src="${si}" />
                                                   </a>
                                                </li>
                                            </c:forEach>
                                           </ul>
                                    </div>

                                </div>
                                <!-- product-imge-->
                            </div>
                            <div class="pb-right-column col-xs-12 col-sm-7">
                                <h1 class="product-name">${product.title}</h1>
                                <div class="product-comments">
                                </div>
                                <br/>
                                <div class="product-price-group" style="background: none repeat scroll 0 0 #F2F2F2;">
                                    <span class="price" style="line-height: 68px;margin-left:20%;
                                                                   font-size: 30px;
                                                                   color: #E73121;
                                                                   font-family: "Microsoft Yahei","Arial","Verda","tahoma";
                                                                   font-weight: bold;
                                                                   text-shadow: 0 0 0 transparent, 1px 1px 1px #8A181B;
                                                                   width: 50%;
                                                                   position: absolute;">
                                    ￥${product.zkFinalPrice} </span>
                                                         <span style="line-height: 68px;margin-left:20%; font-size: 15px;
                                                                    color: #E73121;
                                                                    font-family: "Microsoft Yahei","Arial","Verda","tahoma";
                                                                    font-weight: bold;
                                                                    text-shadow: 0 0 0 transparent, 1px 1px 1px #8A181B;
                                                                    width: 50%;
                                                                    position: absolute;">已有 <strong>${product.volume}</strong>人在抢购该商品</span>
                                </div>
                                 <br/>
                                <div class="product-desc">
                                  <img src="${staticPath}/vendors/assets/images/icon-clock.png"/>&nbsp;&nbsp;&nbsp;&nbsp;离优惠券失效还有：<span class="data-show-box" id="timeDown">
                                           	    					<span class="date-tiem-span d">00</span>天
                                           	    					<span class="date-tiem-span h">00</span>时
                                           	    					<span class="date-tiem-span m">00</span>分
                                           	    					<span class="date-s-span s">00</span>秒
                                           	    				</span>
                                </div>


                                <div class="product-desc">
                                    已领券<strong ><font color="red">${product.couponTotalCount-product.couponRemainCount}</font></strong>张，手慢无 |  共有<font color="red">${product.couponTotalCount}</font>张券
                                </div>
                                <c:if test="${product.itemDescription ne null}">
                                <div class="product-desc">
                                    <br/>推荐理由：${product.itemDescription}
                                </div>
                                </c:if>
                                <div class="product-desc">
                                      <div class="double-arrow"><span style="margin-left: -12px;"></span></div>
                                      <a class="buy-step-sec buy-btn" rel="nofollow" href="${product.couponClickUrl}"   data-itemid="${detail.numId}" target="_blank">立即抢券</a>
                                </div>
                            </div>
                        </div>
                        <!-- tab product -->
                        <div class="product-tab">
                            <ul class="nav-tab">
                                <li class="active">
                                    <a aria-expanded="false" data-toggle="tab" href="#product-detail">商品详情</a>
                                </li>
                            </ul>
                            <div class="tab-container">
                                <div id="product-detail" class="tab-panel active" style="text-align: center">
                                        ${product.description}
                                </div>
                            </div>
                        </div>
                        <!-- ./tab product -->
                        <!-- box product -->
                        <div class="page-product-box">
                            <h3 class="heading">相关商品</h3>
                            <ul class="product-list owl-carousel" data-dots="false" data-loop="true" data-nav = "true" data-margin = "30" data-autoplayTimeout="1000" data-autoplayHoverPause = "true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":4}}'>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p40.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p35.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p37.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p39.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- ./box product -->
                        <!-- box product -->
                        <div class="page-product-box">
                            <h3 class="heading">猜你喜欢</h3>
                            <ul class="product-list owl-carousel" data-dots="false" data-loop="true" data-nav = "true" data-margin = "30" data-autoplayTimeout="1000" data-autoplayHoverPause = "true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":4}}'>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p97.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p34.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p36.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="product-container">
                                        <div class="left-block">
                                            <a href="#">
                                                <img class="img-responsive" alt="product" src="${staticPath}/vendors/assets/data/p36.jpg" />
                                            </a>
                                            <div class="quick-view">
                                                    <a title="Add to my wishlist" class="heart" href="#"></a>
                                                    <a title="Add to compare" class="compare" href="#"></a>
                                                    <a title="Quick view" class="search" href="#"></a>
                                            </div>
                                            <div class="add-to-cart">
                                                <a title="Add to Cart" href="#add">Add to Cart</a>
                                            </div>
                                        </div>
                                        <div class="right-block">
                                            <h5 class="product-name"><a href="#">Maecenas consequat mauris</a></h5>
                                            <div class="product-star">
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star-half-o"></i>
                                            </div>
                                            <div class="content_price">
                                                <span class="price product-price">$38,95</span>
                                                <span class="price old-price">$52,00</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- ./box product -->
                    </div>
                <!-- Product -->
            </div>
            <!-- ./ Center colunm -->
        </div>
        <!-- ./row-->
    </div>
</div>

<!-- Footer -->
<jsp:include page="../common/footer.jsp"/>
<a href="#" class="scroll_top" title="Scroll to Top" style="display: inline;">Scroll</a>
 <html:js  name="assets,leftTime"/>
 <script type="text/javascript">
 function timestampToTime(timestamp) {
         var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
         Y = date.getFullYear() + '-';
         M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
         D = date.getDate() + ' ';
         h = date.getHours() + ':';
         m = date.getMinutes() + ':';
         s = date.getSeconds();
         return Y+M+D+h+m+s;
     }
 	    			$(function(){
 	    				//日期倒计时
 	    				var endTime="${product.couponEndTime}";
 						$.leftTime(endTime,function(d){
 							if(d.status){
 								var $dateShow1=$("#timeDown");
 								$dateShow1.find(".d").html(d.d);
 								$dateShow1.find(".h").html(d.h);
 								$dateShow1.find(".m").html(d.m);
 								$dateShow1.find(".s").html(d.s);
 							}
 						});
 	    			});
 	    		</script>
 </body>
</html>
